<script setup>
import {ref} from 'vue'
import { reactive } from 'vue';
let BlogInnerhtml =reactive([
  {
    id:1,
    title:'火葫芦救爷爷',
    author:'爷爷',
    content:'火葫芦创业未半中道崩阻'

},  
{
  id:2,
    title:'水葫芦救爷爷',
    author:'爷爷',
    content:'水葫芦创业未半中道崩阻'

},
{
  id:3,
    title:'木葫芦救爷爷',
    author:'爷爷',
    content:'木葫芦创业未半中道崩阻'

},
{
  id:4,
    title:'土葫芦救爷爷',
    author:'爷爷',
    content:'土葫芦创业未半中道崩阻'

},
{
  id:5,
    title:'金葫芦救爷爷',
    author:'爷爷',
    content:'金葫芦创业未半中道崩阻'

}
])
let Context =reactive([
  {
    id:1,
    title:'林北救爷爷',
    author:'爷爷',
    content:'林北创业未半中道崩阻'
},
{
    id:1,
    title:'林北2救爷爷',
    author:'爷爷',
    content:'林北2创业未半中道崩阻'
},
{
    id:1,
    title:'林北3救爷爷',
    author:'爷爷',
    content:'林北3创业未半中道崩阻'
},
{
    id:1,
    title:'林北4救爷爷',
    author:'爷爷',
    content:'林北4创业未半中道崩阻'
},
])
let Blog =ref({
  title:'',
  author:'',
  content:''
})

let keyWord = ref('')

function search(){
   BlogInnerhtml.filter(item=>item.title.includes(keyWord.value.trim()))

  
}
function saveBlog(){
  console.log('博客的信息为',Blog.value)
}
function del(id){
const idx = BlogInnerhtml.findIndex(item=>item.id===id)
if(confirm('确认要删除吗')){
  BlogInnerhtml.splice(idx,1)
}

}
function add() {
  // 生成一个新的 id，这里简单地使用当前数组长度 + 1
  const newId = BlogInnerhtml.length + 1;
  // 将表单中的数据添加到数组中
  BlogInnerhtml.push({
    id: newId,
    title: Blog.value.title,
    author: Blog.value.author,
    content: Blog.value.content
  });
  // 清空表单
  Blog.value.title = '';
  Blog.value.author = '';
  Blog.value.content = '';
}

</script>
<template>
  <h1>葫芦娃救爷爷记</h1>
  <div>
    <form>
      <table>
        <label><input type="text" placeholder="请输入你要查找的名字" v-model="keyWord"></label><input type="button" value="搜索" @click="search()">
      </table> 
    </form>
  </div>
  <form>
    <div>
      <tr><td>名字:</td><td><input type="text" placeholder="请输入名字" v-model="Blog.title"></td></tr>
      <tr><td>作者:</td><td><input type="text" placeholder="请输入作者" v-model="Blog.author"></td></tr>
      <tr><td>内容:</td><td><input type="text" placeholder="请输入内容" v-model="Blog.content"></td></tr>
      <td colspan="2">
            <input type="button" value="新增" @click="add()">
          </td>
    </div>
  </form>
  <div>
    <table>
      <thead>
        <tr>
        <th>标题</th>
        <th>作者</th>
        <th>内容</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody  class="center-text">
        <tr v-for="item in BlogInnerhtml" :key="item.id">
          <td>{{item.title}}</td>
          <td>{{item.author}}</td>
          <td>{{item.content}}</td>
          <td><input type="button" value="删除" @click="del(item.id)"></td>
          <td><input type="button" value="修改" @click="updata(item.id)"></td>
        </tr>
      </tbody>
    </table>

    
  </div>
</template>
<style>
.center-text{
  text-align: center;
}
</style>
